| 打开MASA Blazor的正确姿势3.3：组件样式 | 您所在的位置：网站首页 › elementui 深色主题 › 打开MASA Blazor的正确姿势3.3：组件样式 |
|
一、关于组件样式的理解
1、框架和组件
前面我们已经说过，现代前端技术，无论是在框架层面（Blazor、Vue、React等），还是组件层面（Bootstrap、MASA Blazor、ElementUI、AntDesign等），本质上都是对HTML、CSS和JS的组合和封装。框架层面，主要解决HTML和JS的问题；而组件层面，在框架基础上，主要解决CSS样式问题（以上说法可能不全面，但大体是这个意思）。 2、组件样式每套组件，都会在自己的审美标准上，定义一套CSS样式。这套样式的使用主要通过两种方式：一是组件商在定义组件时自己使用，并选择性的以组件属性的方式，暴露部分可定制的样式出来，使我们可以通过组件属性的方式，便捷的定制组件样式；二是我们也可以直接通过HTML原生元素的class属性，直接使用这套CSS样式。 3、快速掌握MASA Blazor组件样式的方法如上所述，快速掌握一套新的组件样式的方式，一是掌握样式表中定义的常用样式，这些样式，我们可以直接在HTML原生标签上直接使用；二是掌握组件属性中，常用的样式属性。我觉得通过这两个方式，大概能快速掌握组件样式定义的80%左右范围。 4、补充：MASA Blazor中的Class和Style属性在MASA Blazor的官方组件中，一般都有Class和Style属性（首字母大写），使用方法虽然和HTML元素的class/style差不多，但两者并不是同一个东西。官方组件中定义的Class/Style，本质上是组件内部通过[Parameter]标注的属性参数（此处指类的属性），接收到父组件传过来的Class/Style值后，在组件的内部使用。这个样式值可能使用在组件内部的div标签上，也可能用在p标签上，甚至是用在其它的官方自定义组件上。 二、掌握MASA Blazor样式表中的常用样式(class/Class中使用) 1、布局：MASA Blazor定义了两套布局样式，Flex弹性布局和Grid网格布局，这部分在后续章节单独说明。 2、颜色：MASA Blazor遵循MaterialDesign风格，定义了一套颜色样式，可用于定义背景颜色和文字颜色。 //基本用法： //HTML原生标签上，定义红色背景 //HTML原生标签上，定义红色背景亮两度 //HTML原生标签上，定义红色文本加深一度 //MASA Blazor组件标签上，定义红色背景、绿色广西 //MASA Blazor组件标签上，定义预设主题色 20个色系： .red 红色 .pink 粉色 .purple 紫色 .deep-purple 深紫色 .indigo 蓝紫色 .blue 蓝色 .light 亮蓝色 .cyan 青色 .teal 蓝绿色 .green 绿色 .light-green 亮绿色 .lime 柠檬色 .yellow 黄色 .amber 琥珀色 .orange 橙色 .deep-orange 深橙色 .brown 棕色 .blue-grey 蓝灰色 .grey 灰色 .black 黑色 色系标准色基础上，加深或减淡： .lighten1~5 减淡5个等级 .darken1~4 加深4个等级 .accent1~4 突出4个等级（主要用于文字） 预制主题色： .primary 主色 .secondary 黑暗 .accent 着重 .info 信息 .success 成功 .warning 警告 .error 出错 .none 高亮 3、文字 大小（支持响应式）： .text-h1 h1标题 .text-h2 h2标题 .text-h3 h3标题 .text-h4 h4标题 .text-h5 h5标题 .text-h6 h6标题 .text-subtitle-1 副标题1 .text-subtitle-2 副标题2 .text-body-1 正文1 .text-body-2 正文2 .text-button 大写加大 .text-overline 大写加宽 .text-caption 加细 装饰线： .text-decoration-none 无装饰线 .text-decoration-line-through 删除线 .text-decoration-overline 上划线 .text-decoration-underline 下划线 加粗变细： .font-weight-black 加黑加粗 .font-weight-bold 明显加粗 .font-weight-medium 普通加粗 .font-weight-regular 正常 .font-weight-light 减淡 .font-weight-thin 变细 .font-italic 斜体 透明度： .text--primary 在深色主题中为100%透明度，在亮色主题中为87%透明度 .text--secondary 在深色主题中为70%透明度，在亮色主题中为60%透明度 .text--disabled 在深色主题中为50%透明度，在亮色主题中为38%透明度 对齐（支持响应式）： .text-left 左对齐 .text-center 居中 .text-right 右对齐 .text-justify 两端对齐，改变字与字之间的间距使得每行对齐 大小字转换： .text-lowercase 转为小写 .text-uppercase 转为大写 .text-capitalize 转为首字母大写 其它： .text-truncate 文本截断，需要在block或inline-block容器中 .text-no-wrap 防止文本换行 4、间距 外边距：.m {l|r|t|b|x|y|a}-{0~16|n1~n16|auto}： 如.ml-4 左外边距4个单位，1个单位等于4个像素 如.mx-n2 左右水平方向外边距负2个单位 如.ma-6 四边的外边距6个单位 如.mx-auto 水平居中 内边距：.p {l|r|t|b|x|y|a}-{0~16|n1~n16|auto}： 内边距，使用方法和外边距一样 5、边框半径 所有边角：.rounded-{0|sm|md|lg|xl|pill|circle} 无圆角、小圆角、中圆角、大圆角、加大圆角、药丸、圆形 如.round-md或.round：中圆角 如.round-circle：圆形 指定边角：.rounded-{r|l|t|b|tl|tr|br|bl}-{0|sm|md|lg|xl|pill|circle} 指定边角 如.round-l-sm 左上和左下小圆角 如.round-tl-sm 左上小圆角 6、溢出：当子元素超过父元素容器的边界时，设置子元素的溢出效果 .overflow-auto 自动添加滚动条 .overflow-hidden 隐藏子元素的溢出内容 .overflow-visible 显示子元素的溢出内容 .overflow-{x|y}-{auto|hidden|visible} 指定X轴或Y轴的溢出效果 7、浮动（支持响应式）： .float-left 向左浮动 .float-right 向右浮动 .float-start 向起点浮动 .float-end 向终点浮动 .float-none 无浮动 三、MASA Blazor组件属性中常用样式属性(属性中使用) 1、Class和Style样式：... 等效于class和style，虽然两者不是同一个东西 2、阴影（海拔）：... 值取0~24，值越大，阴影越大，离用户视觉越近。 3、边框大小类： Dense：布尔值，降低组件高度，更加紧凑 Prominent：布尔值，增加组件高度，突出显示 Outlined：布尔值，背影透明薄边框 Rounded：布尔值，圆角 Shaped：布尔值，左上角和右下角圆角 Tile:布尔值，方形 Fab：布尔值，圆形 Border：枚举值，边框。Borders.Right/Borders.Left/Borders.Top/Borders.Bottom Height：数值，高度 Weight：数值，宽度 MaxHeight/MinHeight：数值，最高/最小高度 MaxWidth/MinWidth：数值，最大/最小宽度 4、主题： Light：布尔值，亮色主题 Dark：布尔值，深色主题 Color：颜色，十六进制或rgb()或rgba TextColor：文本颜色，十六进制或rgb()或rgba 5、绝对定位： Absolute：布尔值，开启绝对定位 Left：布尔值，与Absolute结合使用，靠左 Right：布尔值，与Absolute结合使用，靠右 Top：布尔值，与Absolute结合使用，靠上 Bottom：布尔值，与Absolute结合使用，靠下 6、过渡动画：... fab-transition：旋转过渡 fade-transition：淡入淡出 scale-transition：尺寸渐变伸缩 scroll-x-transition：自左向右滚动 scroll-x-reverse-transition：自右向左滚动 scroll-y-transition：自上而下滚动 scroll-y-reverse-transition：自下而上滚动 slide-x-transition：自左向右滑入 slide-x-reverse-transition：自右向左滑入 slide-y-transition：自上而下滑入 slide-y-reverse-transition：自下而上滑入 ：特殊，是一个包裹组件，子元素隐藏显示时，延Y轴放大 ：特殊，是一个包裹组件，子元素隐藏显示时，延X轴放大 7、补充说明：①以上属性，并不是所有组件都适用。汇总的目的，是熟悉这些常用属性，这样在查询或使用一个组件时，大多数属性都已经熟悉，这样能够大大提高效率；②如果熟悉CSS，会感觉组件库的样式定义，比较凌乱，也会受限，如果无法满足要求，完全可以使用HTML和CSS手动定义组件。
|
| CopyRight 2018-2019 实验室设备网 版权所有 |